<template>
	<view class="content pore flexco">
		<image src="../../static/toububg.png" class="toubuimg zindex99" mode="aspectFill"></image>
		<view class="toububg zindex999 topview box">
			<view class="flexcost cor-ff pt120">
				<text>登录后</text>
				<text>可获取更多权益</text>
			</view>
		</view>
		<view class="botview">
			<view class="flexst inp">
				<view class="inpl">手机号</view>
				<view class="shu"></view>
				<view class="mr20">+86</view>
				<input class="fs28" type="number" placeholder="请输入手机号" v-model="account.mobile" />
			</view>
			<view class="flexst inp mb40">
				<view class="inpr">密码</view>
				<view class="shu"></view>
				<input class="fs28" type="password" placeholder="请输入密码" v-model="account.password" />
			</view>
			<button @click="goLogin">登 录</button>
		</view>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref, getCurrentInstance, toRef } from 'vue';
import { Iaccount } from '../../../api/vo/login';
import { user } from '../../../api/login';

const { proxy } = getCurrentInstance();
const account  = reactive(new Iaccount())

// 回显账号
if (uni.getStorageSync('phone')) {
	account.mobile = uni.getStorageSync('phone');
}

// 登录
const goLogin = async() => {
	if (!proxy.$u.test.mobile(account.mobile)) {
		uni.showToast({
			title: '请输入正确的手机号',
			icon: 'none'
		});

	}else{
		uni.showLoading({
			title:'正在登录...'
		})
		const res = await user.passwordLogin(account);
		if(res.ok){
			uni.setStorageSync('token', res.data.token);
			uni.setStorageSync('shopInfo', res.data);
			uni.setStorageSync('phone', account.mobile); 
			uni.reLaunch({
				url:'/pages/index/index'
			})
		}else{
			uni.hideLoading();
			uni.showToast({
				title:res.msg,
				icon:'none'
			})
		}
	}
};
</script>

<style>
page {
	background: #ffffff;
}

.toubuimg {
	width: 750rpx;
	height: 340rpx;
}

.toububg {
	position: absolute;
	left: 0;
	top: 0;
	width: 750rpx;
	height: 340rpx;
}

.zindex99 {
	z-index: 99;
}

.zindex999 {
	z-index: 999;
}

.topview {
	padding: 64rpx 32rpx;
}

.pt120 {
	padding-top: 120rpx;
}

.botview {
	border-radius: 10rpx 10rpx 0 0;
	margin-top: -50rpx;
	background: #ffffff;
	padding: 100rpx 60rpx;
	width: 100%;
	box-sizing: border-box;
	z-index: 9999;
}

.inp {
	border-bottom: 1rpx solid #e8e8e8;
	line-height: 100rpx;
}

.inpl,
.inpr {
	width: 180rpx;
}

.inp input {
	width: 240rpx;
}

.shu {
	width: 1rpx;
	height: 24rpx;
	background: #e2e2e2;
	margin-right: 20rpx;
}

.mb40 {
	margin-bottom: 40rpx;
}
button {
	width: 240rpx;
	height: 100rpx;
	background: linear-gradient(142deg, #fa3419 0%, #dc1d32 100%);
	border-radius: 50rpx;
	font-size: 28rpx;
	text-align: center;
	line-height: 100rpx;
	color: #ffffff;
	margin-top: 100rpx;
}
.mr20 {
	margin-right: 20rpx;
}
</style>
